<!-- 商品详情页 -->
<template>
    <RouterView />

    <el-card class="box-card" style="width: 800px;margin-left: 20px;margin-top: 20px;float: left;">
        <template #header>
            <div class="card-header">
                <span>详情</span>
            </div>
        </template>
        <div>
            课程概述
        </div>
        <div>
            <img :src="reccourselData" class="imagebbb" />
            <img :src="reccourselData" class="imagebbb" />
            <!-- {{ reccourselData }} -->
        </div>
    </el-card>
    <!-- 精品推荐 -->
    <el-row
        style="background-color: white;width: 330px;padding-top: 10px;padding-bottom: 20px;margin-left: 840px;margin-top: 20px;">
        <h3 style="border-bottom: 1px solid rgb(228, 227, 227);width: 100%;margin-top: 10px;margin-left: 20px;">精品推荐</h3>
        <el-col v-for="(item, index) in carouselData" :key="index" :span="16" :offset="index > 16 ? 8 : 3">
            <el-card :body-style="{ padding: '5px' }" style="width: 280px;margin-top: 20px;cursor: pointer;"
                @click="goBackcoudetails(item.courseId)" class="goodsss">
                <img :src="item.courseCover" style="width: 270px;height: 150px;display: block;" />
                <div style="padding: 14px;text-align: center;height: 40px;">
                    <span class="crousename">{{ item.courseName }}</span>
                </div>
                <div style="height: 35px;">
                    <span class="cprice">{{ '￥' + item.courseCPrice }}</span>
                    <span class="oprice">{{ '￥' + item.courseOPrice }}</span>
                </div>
            </el-card>
        </el-col>
    </el-row>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from "element-plus";
import axios from '../../api/index';
import { useRoute, useRouter } from 'vue-router';


export default {
    setup() {

        let reccourselData = ref();
        let carouselData = ref([]);
        let route = useRoute();
        let router = useRouter();
        let goodstate = ref({});
        let token = localStorage.getItem('token');
        let longtoken = localStorage.getItem('longtoken');
        let itemId = route.params.goodId;
        var rootNode = document.documentElement;
        // 从localStorage中获取存储的JSON字符串  
        var userInfoJsonString = localStorage.getItem('userInfo');

        // 确保userInfoJsonString不是null，如果是null，那么将其设置为空字符串  
        if (userInfoJsonString === null) {
            userInfoJsonString = "{}";
        }
        // 解析JSON字符串为JavaScript对象  
        var userInfo = JSON.parse(userInfoJsonString);

        //发起请求返回推荐的数据
        onMounted(async () => {
            try {
                const response = await axios.get('/course/findBestCourses');
                if (response.code === 200) {
                    console.log(response.data);
                    carouselData.value = response.data;
                }
            } catch (error) {
                ElMessage.error("臣妾未能请求到数据，给客官赔罪啦~~");
            }
        });

        //发起请求返回该id数据
        onMounted(async () => {
            try {
                console.log(itemId);
                const response = await axios.get('/course/findById?courseId=' + itemId);
                if (response.code === 200) {
                    console.log(response.data);
                    reccourselData.value = response.data.courseDesc;
                    console.log(reccourselData.value);
                }
            } catch (error) {
                ElMessage.error("臣妾未能请求到数据啊，给客官赔罪啦~~");
            }

            try {
                console.log(itemId);
                axios.get('/goodState/findGStateByUIdGId', {
                    params: {
                        userId: userInfo.id,
                        goodId: itemId
                    },
                    headers: {
                        token: token,
                        longtoken: longtoken
                    }
                }).then(response => {
                    if (response.code === 200) {
                        console.log(response.data);
                        goodstate.value = response.data;
                        router.push('/productChild/' + itemId)
                    }
                })
            } catch (error) {
                ElMessage.error("臣妾未能请求到数据喔，给客官赔罪啦~~");
            }
        });

        function goBackcoudetails(Item) {
            router.push("/productChild/" + Item)
        }


        return {
            goBackcoudetails,
            goodstate,
            reccourselData,
            carouselData,
            route,
            router,
            itemId,
            token,
            longtoken,
        }
    }
}

</script>

<style>
.crousename {
    font-size: 16px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: rgb(0, 0, 0);
}

.oprice {
    font-size: 14px;
    text-decoration-line: line-through;
    margin-left: 10px;
    color: rgb(107, 107, 107);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.imagebbb {
    width: 100%;
}
</style>
